<template>
	<view>
		<view class="sticky w-1 bg-ff">
			<up-tabs lineColor="#01796D" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :current="curtab"
				:list="tabs" lineWidth="60rpx" :scrollable="false" @click="clickTab">
			</up-tabs>
		</view>
		<view class="w-1" style="padding: 20rpx 32rpx;">
			<!-- style="height: 212rpx;" -->
			<view class="w-1 relative m-b-30 bg-ff br-20 o-h" :class="curtab==0?'':'gray-element'" v-for="(item,index) in list" :key="index">
				<view class="w-1 fr-s-c">
					<view class="fl-c warp bg-main" style="width: 174rpx; height: 210rpx;">
						<view class="c-ff">
							<text class="bold fs-28">￥</text>
							<text class="bold fs-60">{{item.price}}</text>
						</view>
						<!-- 满50可用/ -->
						<text class="c-ff fs-24 m-t-10 t-c">无门槛</text>
					</view>
					<view class="fl-b-s relative flex-1" style="height: 210rpx;">
						<view class="w-1 fr-b-c bb-solid" style="height: 144rpx; padding: 0 28rpx;">
							<view class="fl-s-s flex-1">
								<text class="bold fs-32 c-33 text-line-1">{{item.name}}</text>
								<text class="c-33 fs-24 m-t-15">有效期至{{item.overtime_text}}</text>
							</view>
							<view class="label fr-c c-ff fs-24" @click="touse(item)">{{curtab==0?'使用':curtab==1?'已使用':'已失效'}}</view>
						</view>
						<view class="flex-1 fr-b-c w-1" style="padding: 0 28rpx;">
							<!-- /仅限项目名称项目名称使用 -->
							<text class="c-00 fs-24 flex-1 text-line-1">全平台通用</text>
							<!-- <up-icon name="arrow-down-fill" size="30rpx" color="#B5B5B5"></up-icon> -->
						</view>
					</view>
				</view>
				<!-- 	<view class="flex-1 w-1 fr-s-c" v-if="item.shop_nickname" style="padding: 0 25rpx;">
						<image class="m-r-20" style="width: 41rpx; height: 38rpx;" src="/static/images/tab5/shopicon2.png" mode=""></image>
						<text class="c-33 fs-32 bold text-line-1 flex-1 m-r-20" >{{item.shop_nickname}}</text>
						<view class="fr-c c-ff bg-main ubtn fs-28">立即使用</view>
					</view>
					<view v-else class="flex-1 w-1 fr-s-c" style="padding: 0 25rpx;">
						<text class="c-33 fs-32 bold text-line-1 flex-1 m-r-20" >全平台通用</text>
						<view class="fr-c c-ff bg-main ubtn fs-28" @click="tohome">立即使用</view>
					</view> -->
			</view>
		</view>
		<view class="w-1 p-t-150" v-if="nodata">
			<up-empty :icon="$icon"></up-empty>
		</view>
	</view>
</template>

<script setup>
	function tohome() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const activeStyle = {
		'font-weight': 800,
		'font-size': '28rpx',
		color: '#01796D'
	}
	const inactiveStyle = {
		'font-weight': 400,
		'font-size': '30rpx',
		color: '#000000'
	}
	const citem = ref('');

	const tabs = reactive([{
		// (10)
			name: '未使用',
			val: 1
		},
		{
			name: '已使用',
			val: 2
		},
		{
			name: '已失效',
			val: 3
		}
	]);
	const curtab = ref(0)

	function clickTab(e) {
		curtab.value = e.index;
		reget()
	}

	function touse(item){
		if(curtab.value==0){
			if(choose.value==1){
				uni.$emit('setcoupon',item)
				uni.navigateBack()
			}else{
				tohome()
			}
			
		}
	}

	const choose = ref(0)
	onLoad((o) => {
		choose.value = o.choose || 0;
		getlist()
	})

	onPullDownRefresh(() => {
		reget()
	})
	onReachBottom(() => {
		if (loadmore.value) {
			page.value++;
			getlist()
		}
	})
	const page = ref(1);
	const list = ref([{
		price: 10,
		name: 'wonima ',
		tag: '啊哈哈',
		overtime_text: '2024-25-15',
		shop_nickname: '',
	},{
		price: 10,
		name: 'wonima ',
		tag: '啊哈哈',
		overtime_text: '2024-25-15',
		shop_nickname: '',
	},{
		price: 10,
		name: 'wonima ',
		tag: '啊哈哈',
		overtime_text: '2024-25-15',
		shop_nickname: '',
	},]);
	const nodata = ref(false);
	const loadmore = ref(true);

	function getlist(loading = true) {
		uni.$get({
			url: '/api/user/my_couponslst',
			data: {
				page: page.value,
				type: tabs[curtab.value].val,
			},
			loading
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}


	function reget(loading = false) {
		page.value = 1;
		getlist(loading)
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.label {
		width: 108rpx;
		height: 48rpx;
		background: #FF5C55;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
	}

	.ubtn {
		width: 144rpx;
		height: 52rpx;
		border-radius: 28rpx;
	}
	
	.gray-element {
	  filter: grayscale(100%);
	}
</style>